{% block head %}
    <title>{{sysSettings.siteName}} - {{stream.streamName}}</title>
    <link href="/static/vendor/videojs/css/video-js.css" rel="stylesheet">

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
{% endblock %}

{% block body %}
<div class="">
      <div class="container-fluid">
          <div class="row justify-content-md-center">
              <div class="col-xl-12 col-sm-12">
                  <div class="player">
                      <div id="videoContainer">
                        <video id="video" class="shadow videoStream video-js vjs-big-play-centered" poster="{{channel.channelLoc}}.png" {% if isAutoPlay == True %}autoplay{% endif %} controls preload="auto" data-setup='{"fluid": true}'>
                            <source src="{{streamURL}}" type="application/x-mpegURL">
                            <p class="vjs-no-js">
                              To view this video please enable JavaScript, and consider upgrading to a web browser that
                              <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                            </p>
                        </video>
                      </div>
                      <div id="offlineImage" style="display:none;">
                        <img class="videoStream shadow" {% if channel.offlineImageLocation != None %} src="/images/{{channel.offlineImageLocation}}" {% else %} src="/static/img/video-placeholder.jpg" {% endif %}>
                      </div>
                  </div>
              </div>
          </div>
      </div>
</div>


{% endblock %}

{% block scripts %}
    <script src="/static/vendor/videojs/js/video.js"></script>

    <script>
        var player = videojs('video', {autoplay: {{isAutoPlay}}, errorDisplay: false, liveui: true, liveTracker:true});
    </script>

    <script>
    //Fixes for VideoJS on Disconnect to Force a Reconnect when the readyState is stuck at 2
    function monitor_vid(){
        videoJSObj = videojs('video');
        currentReadyState = videoJSObj.readyState();

        videoWindowState = document.getElementsByTagName('video');

        videoContainer = document.getElementById('videoContainer');
        offlineWindow = document.getElementById('offlineImage');

        $.getJSON('/apiv1/channels/{{channel.channelLoc}}', function(data) {
            var channelList = data['results'][0];
            var streamIDList = channelList['stream'];

            if (streamIDList.length > 0) {
                var currentStreamID = streamIDList[0];

                videoContainer.style.display = "block";
                offlineWindow.style.display = "none";

                if (currentReadyState == 2) {
                    try {
                        videoJSObj.pause();
                        videoJSObj.currentTime(0);
                        videoJSObj.play();
                        currentReadyState = videoJSObj.readyState();
                    } catch(e) {
                        console.log("OSP tried restarting the stream but had an issue:" + e)
                    }
                } else if (currentReadyState == 0) {
                    try {
                        videoJSObj.reset();
                        videoJSObj.src('{{streamURL}}');
                        videoJSObj.pause().trigger('loadstart');
                        videoJSObj.play();
                    } catch (e) {
                        console.log("OSP tried restarting the stream but had an issue:" + e)
                    }
                }

            } else {
                try {
                    videoJSObj.pause();
                    videoJSObj.reset();
                    videoContainer.style.display = "none";
                    offlineWindow.style.display = "block";
                } catch(e) {
                    console.log("OSP tried restarting the stream but had an issue:" + e)
                }
            }
        });
        var lastVideoState = currentReadyState;
    }

    setInterval(function() {
        monitor_vid();
    }, 10000);
    </script>


{% endblock %}